<script setup lang="ts">
import { onMounted, ref } from 'vue';
import type {Ref} from 'vue'
//接收传递过来的参数，商品的 proid
import { useRoute } from 'vue-router';
// 导入商品列表类型
import type { iPro } from '@/type/home'
// 导入图片预览组件
import { showImagePreview, showSuccessToast, showFailToast } from 'vant';
// 导入得到商品详细信息的请求
import { getDetailFn } from '@/api/prodetail'
//导入请求 获取购物车信息 和 添加购物车请求
import { getCartListFn,addCartListFn } from '@/api/cart';
import { useUserstore } from '@/stores/user';

const user=useUserstore()
const route=useRoute()

//商品详细信息
const detail:Ref<iPro[]> = ref([])

//请求函数
//获取商品详细数据
function getDetailData(){
   getDetailFn(route.params.proid as string).then(res=>{      
      console.log('商品详细信息为：',res);
      
      //数组中的轮播图在一个字符串中，我们要将其格式化为数组
      res.data.data.banners=res.data.data.banners[0].split(',')
      
      setTimeout(()=>{
         detail.value.push(res.data.data)
      },100)
   })
}


//获取购物车数据
//购物车中商品数量
const num=ref(0)
function getCartListData(){
   getCartListFn({
      userid : user.userid
   }).then(res=>{
      console.log("购物车信息：",res);
      if(res.data.data){
         num.value=res.data.data.length
      }
   })
}

//加入购物车
function addCartListData(){
   addCartListFn({
      // 传递用户 userid 通过全局变量 useUserstore 获取
      userid : user.userid,
      // 传递商品 proid 通过 useroute 获取
      proid: route.params.proid as string,
      num:1
   }).then(res=>{
      console.log('加入购物车结果：',res);
      if(res.data.code==200){
         //重新获取购物车中商品数量信息
         getCartListData()
         showSuccessToast(res.data.message)
      }else{
         showFailToast(res.data.message)
      }
   })
}
onMounted(()=>{
   getDetailData()
   getCartListData() 
})

//--------------轮播图改变
const current =ref(1)
function changeImage(index:number){
   current.value= index+1
}
//--------------轮播图改变

//--------------图片预览
let currentpage=0
const swipeRef:Ref<any>=ref(null)
function Lookimage(){
   showImagePreview({
  images:detail.value[0].banners,

  startPosition: current.value-1,

  //将预览页面变为当前页面
  onChange(index:number){
   currentpage=index
  },

  //当关闭预览时进行回调
  onClose(){
   //将当前所在位置同步到轮播图中
   //将轮播图索引值设置到当前关闭的位置
   swipeRef.value.swipeTo(currentpage)
  }
});
}
//--------------图片预览


//--------------视频播放模块

const show =ref(false)
const videoRef:Ref<any>=ref(null)
//打开视频播放窗口
function showVideoClick(){
   show.value=true
   videoRef.value.play()
}
//关闭视频播放窗口
function stopVideoClick(){
   show.value=false
   videoRef.value.pause()
}

//--------------视频播放模块

//--------------客服按钮

function showMC(){
   window._MEIQIA('metadata',{
       address: '旺田商务中心', // 地址
        age: 20, // 年龄
        comment: '一个阳光帅气的大男孩', // 备注
        email: '66666666.66.66', // 邮箱
        gender: '男', // 性别
        name: '小吴', // 名字
        qq: '666666666', // QQ
        tel: '16666666666', // 电话
        weibo: '66666666.666', // 微博
        weixin: '66666666.66666.6', // 微信
        contact: '6666666' // 联系人
   });
   window._MEIQIA('showPanel');
}

//--------------客服按钮




</script>

<template>
  <main class="box">
  <!-- 头部 -->
    <header class="header">
      <span class="header-left" @click="$router.back">
         &lt; 返回
      </span>
      <span> 商品详情</span>
      <slot name="right"></slot>
    </header>

   

    <!-- 内容 -->
      <div class="content">


         <div v-if="detail[0]" >      
            <!-- 轮播图 -->
            <div class="swipe-box">

               <van-swipe @click="Lookimage" ref="swipeRef" @change="changeImage" class="my-swipe" indicator-color="white" :autoplay="3000" lazy-render :show-indicators='false'>
                  <van-swipe-item v-for="item in detail[0].banners" :key="item">
                     <van-image class="img" :src="item"/>
                  </van-swipe-item>
               </van-swipe>

               <!-- 自定义轮播图页码 -->
               <span class="page">{{current}}/{{ detail[0].banners.length }}</span>
            
            <!-- 视频播放按钮 -->
               <div @click="showVideoClick" class="video-btn">
                  <van-icon size="30" name="play" />
               </div>

            </div>  

            <!-- 文字介绍 -->
            <div class="cell"> 
                  <h2>{{ detail[0].proname }}</h2>
                  <p>
                     <span style="color: red;">活动：￥ {{ detail[0].originprice*detail[0].discount/10 }}</span>
                     &#X3000;
                     <del style="color: #ccc;">原价：￥ {{ detail[0].originprice }}</del>
                  </p>
                  <p>{{ detail[0].brand }}</p>
                  <p>{{ detail[0].category }}</p>
                  <p class="desc">{{ detail[0].desc }}</p>
               </div>
         </div>
         
         <!-- 做骨架屏 -->
         <div v-else>
            <van-skeleton title :row="3" />
         </div>

       
         
         <!-- 视频播放模块 -->
         
         <van-overlay :show="show" @click="stopVideoClick">
            <template #default>
               <video ref="videoRef" controls  class="myvideo" src="https://vod.300hu.com/vod/product/e305f5bd-b1bd-4f17-b0ea-8d60ff611f83/1087_3895_1_800c4d066_f.mp4?source=1&h265=1088_3000_1_4284b9ae5_f.mp4">
               </video>
            </template>
         </van-overlay>


      <van-action-bar>
         <van-action-bar-icon icon="chat-o" @click="showMC" text="客服" dot />
         <van-action-bar-icon icon="cart-o"  text="购物车" :badge="num" />
         <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
         <van-action-bar-button type="warning" @click="addCartListData" text="加入购物车" />
         <van-action-bar-button type="danger" text="立即购买" />
      </van-action-bar>

      
      </div>
  </main>

</template>
<style scoped lang="scss">
.header{
  position: relative;
  .header-left{
   position: absolute;
   left: 10px
  }
}

.swipe-box{
   position: relative;
   .my-swipe{
      height: 380px;
      line-height: 380px;
      .img{
         width:100%;
         height: 100%;
      }
   }

   .page{
      position:absolute;
      width:60px;
      height: 30px;
      background-color: rgba($color: #000000, $alpha: 0.5);
      right: 0;
      bottom: 0;
      line-height: 30px;
      font-size: 16px;
      color: white;
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
      text-align: center;
   }

   .video-btn{
      position:absolute;
      bottom: 25px;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 30px;
      background-color: #f66;
      text-align: center;
      color: white;
      border-radius: 15px;
   }
}

.myvideo{
   width: 100%;
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
}

.cell{
   padding: 12px;
   height: 3000px;
   .desc{
      font-size: 0.14rem;
      line-height: 30px;
   }
}

</style>

